<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/cities.js"></script>
    <script>
        window.onload = function () {
            var province = document.getElementById("province");
            for (var i = 0; i < china.provinces.length; i++) {
                var option = document.createElement("option");
                option.innerHTML = china.provinces[i].name;
                province.appendChild(option);
            }

            province.onchange = function () {
                var city = document.getElementById("city");
                for (var j = 1; j < city.options.length; j++) {
                    city.removeChild(city.options[j])
                    j--;
                }
                for (var i = 0; i < china.provinces[province.selectedIndex - 1].city.length; i++) {
                    var option = document.createElement("option");
                    option.innerHTML = china.provinces[province.selectedIndex - 1].city[i];
                    city.appendChild(option);
                }

            }
        }
    </script>
</head>
<body>
<select id="province" name="province">
    <option value="none">--请选择省--</option>
</select>
<select id="city" name="city">
    <option value="none">--请选择市--</option>
</select>
</body>
</html>